<template>
    <div>
        <div id="index">
            <header>
                <a class="position">
                    <i class="iconfont">&#xe62e;</i>
                    <span class="address">{{ar.address}}</span>
                    <i class="iconfont">&#xe637;</i>
                </a>
                <router-link to="/search">
                    <a class="search">
                        <i class="iconfont">&#xe660;</i>
                        <span class="search-text">鸡排</span>
                    </a>
                </router-link>
            </header>
            <img id="logo" src="../assets/img/indexbg.jpg" alt="..">
            <div class="live">
                <a :key="index" v-for="(item, index) in nearby" v-if="index <= 12 && index >= 5">
                    <img :src="item.image_hash ? '//fuss10.elemecdn.com/'+ item.image_hash.substr(0,1) + '/' + item.image_hash.substr(1,2) + '/' + item.image_hash.substr(3)
                            + (item.image_hash.slice(-3) == 'png' ? '.png' : '.jpeg') + '?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/' : '' " alt=".." />
                    <span>{{item.name}}</span>
                </a>
            </div>
            <section>
                <h3>附近商家</h3>
                <div class="sellerList">
                    <div :key="index" class="field" v-for="(item, index) in seller">
                        <div class="field-left">
                            <span v-if="item.is_premium || item.is_new" :style="item.is_premium ? 'background : #ffa627' : 'background : #21C56C'">{{ item.is_premium ? '品牌' : '新店' }}</span>
                            <img :src="item.image_path ?'//fuss10.elemecdn.com/' + item.image_path.substr(0,1) + '/' + item.image_path.substr(1,2) + '/' + item.image_path.substr(3)
                                + (item.image_path.slice(-3) == 'png' ? '.png' : '.jpeg') + '?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/' : '' ">
                        </div>
                        <div class="content">
                            <p class="name">{{item.name}}</p>
                            <div class="preorder-info" v-if="item.next_business_time && parseInt(item.next_business_time.replace(':','')) > timing">
                                <span class="preorder-status">接受预订</span>
                                <span class="preorder-info">{{item.next_business_time}}后开始配送</span>
                            </div>
                            <div class="shop-info">
                                <div class="appr-status">
                                    <i class="iconfont">&#xe70e;</i>
                                    <i class="iconfont">&#xe70e;</i>
                                    <i class="iconfont">&#xe70e;</i>
                                    <i class="iconfont">&#xe70e;</i>
                                    <i class="iconfont">&#xe70e;</i>
                                </div>
                                <p>月售{{item.recent_order_num}}</p>
                                <div class="distance">
                                    <span>{{item.order_lead_time}}min</span>
                                    <span>|</span>
                                    <span>{{item.distance > 1000 ? (item.distance / 1000).toFixed(2) + 'km' : item.distance + 'm'}}</span>
                                </div>
                            </div>
                            <div class="shop-give">
                                <div class="shop-text">
                                    <span>起送价￥{{item.float_minimum_order_amount}}</span>
                                    <span>|</span>
                                    <span>{{item.piecewise_agent_fee ? item.piecewise_agent_fee.tips : ''}}</span>
                                </div>
                                <div class="allocation-icon" v-if="item.delivery_mode">
                                    <span>美团专送</span>
                                </div>
                            </div>
                            <div class="activity" :key="i" v-for="(val, i) in item.activities" v-if="i > 1 ? false : true">
                                <span class="new" :style="'background: #' + val.icon_color">{{val.icon_name}}</span>
                                <span class="tips">{{val.tips}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <Footerpage></Footerpage>
    </div>
</template>

<script>
import axios from 'axios'
import $ from 'jquery'
import { mapState } from 'vuex'
import Router from 'vue-router'
import Footerpage from './Footer.vue'
export default {
    name: 'Sy',
    data() {
        return {
            nearby: [],
            limit: 10
        }
    },
    components: {
        Footerpage
    },
    computed: {
        timing() {
            var time = new Date();
            var now = time.getHours() + '' + time.getMinutes()
            return parseInt(now)
        },
        ...mapState(['seller','ar'])
    },
    created() {
        var oSelf = this
        //做一个判断是否存在定位信息
        if (sessionStorage.getItem('address')) {
            var str = JSON.parse(sessionStorage.getItem('address'))
            oSelf.$store.commit('ADDRESSMSG', str)
            var lat = str.latitude;
            var lon = str.longitude;
            getAllmsg(lat, lon)
            return
        } else {
            var oSelf = this
            var map, geolocation;
            //加载地图，调用浏览器定位服务
            map = new AMap.Map('container');
            map.plugin('AMap.Geolocation', function () {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    buttonPosition: 'RB'
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
            });
            //解析定位结果
            function onComplete(data) {
                var str = {};
                str = { 'longitude': data.position.getLng(), 'latitude': data.position.getLat(), 'address': data.addressComponent.district + data.addressComponent.township + data.addressComponent.street + data.addressComponent.streetNumber }
                //保存到sessionStorage
                sessionStorage.setItem('address', JSON.stringify(str))
                //提交一个裂变
                oSelf.$store.commit('ADDRESSMSG', str)
                var lat = str.latitude;
                var lon = str.longitude;
                getAllmsg(lat, lon)
            }
            //解析定位错误信息
            function onError(data) {
                console.log('定位失败')
            }
        }
        function getAllmsg(lat, lon) {
            //请求附近美食
            axios.get('http://localhost:3000/nearby', {
                params: {
                    latitude: lat,
                    longitude: lon
                }
            }).then(function (res) {
                oSelf.nearby = res.data[0].entries
            }).catch(function (err) {
                console.log(err)
            })
            //请求商家
            function reqSeller(lat, lon) {
                axios.get('http://localhost:3000/seller', {
                    params: {
                        latitude: lat,
                        longitude: lon,
                        limit: oSelf.limit
                    }
                }).then(function (res) {
                    oSelf.$store.commit('SELLERMSG', res.data)
                }).catch(function (err) {
                    console.log(err)
                })
            }
            reqSeller(lat, lon);
            $(window).scroll(function () {	//下拉加载
                if ($(this).scrollTop() + $(this).height() == $(document).height()) {
                    oSelf.limit += 5
                    reqSeller(lat, lon);
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../static/px2rem.scss';
#index {
    width: 100%;
    header {
        width: 100%;
        position: absolute;
        height: px2rem(40);
        .position {
            float: left;
            height: px2rem(28);
            margin: px2rem(10) px2rem(12) 0 7%;
            padding: 0 px2rem(5);
            color: #fff;
            font-size: px2rem(17);
            background: rgba(0, 0, 0, 0.3);
            border-radius: px2rem(13);
            position: relative;
            width: 35%;
            .address {
                width: 64%;
                float: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: px2rem(14);
                line-height: px2rem(28);
                margin: 0 px2rem(5);
            }
            i {
                font-size: px2rem(16);
                float: left;
                line-height: px2rem(28);
            }
        }
        .search {
            float: left;
            height: px2rem(28);
            color: #333;
            line-height: px2rem(28);
            box-sizing: border-box;
            border-radius: px2rem(13);
            margin-top: px2rem(10);
            width: 45%;
            background: #fff;
            padding-left: px2rem(8);
            i {
                font-size: px2rem(16);
            }
            .search-text {
                font-size: px2rem(14);
            }
        }
    }
    #logo {
        width: 100%;
        height: px2rem(170);
    }
    .live {
        height: px2rem(202);
        padding-bottom: px2rem(30);
        overflow: hidden;
        width: 100%;
        a {
            display: flex;
            width: 25%;
            height: px2rem(72);
            padding-top: px2rem(14);
            float: left;
            flex-direction: column;
            align-items: center;
            span {
                display: block;
                margin-top: px2rem(12);
                font-size: px2rem(13);
                color: #2f2f2f;
            }
        }
    }
    section {
        width: 100%;
        border-top: px2rem(10) solid #efefef;
        padding-top: px2rem(15);
        text-align: center;
        h3 {
            display: inline-block;
            position: relative;
            height: px2rem(22.5);
            line-height: px2rem(22.5);
            font-size: px2rem(16);
            color: #333;
        }
        h3:before,
        h3:after {
            content: '';
            position: absolute;
            top: px2rem(12);
            width: px2rem(30);
            height: 0;
            font-size: 0;
            border-top: px2rem(0.5) solid black;
            transform: scaleY(0.5);
        }
        h3:before {
            left: - px2rem(35);
        }
        h3:after {
            right: - px2rem(35);
        }
        .sellerList {
            width: 100%;
            float: left;
            padding: 0 px2rem(15) 0 px2rem(10);
            .field {
                float: left;
                width: 100%;
                border-bottom: px2rem(0.5) solid #e4e4e4;
                padding: px2rem(15) 0 px2rem(12.5);
                .field-left {
                    width: px2rem(84);
                    height: 100%;
                    position: relative;
                    border: px2rem(0.5) solid #E4E4E4;
                    margin-right: px2rem(8);
                    float: left;
                    img {
                        width: 100%;
                        height: px2rem(63);
                    }
                    span {
                        position: absolute;
                        left: 0;
                        top: 0;
                        padding: px2rem(2);
                        font-size: px2rem(12);
                        color: #fff;
                        text-align: center;
                    }
                }
                .content {
                    float: left;
                    width: 72%;
                    text-align: left;
                    color: #333;
                    .name {
                        font-size: px2rem(16);
                        width: 100%;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    .preorder-info {
                        margin-top: px2rem(6);
                        font-size: px2rem(12);
                        color: #FFA627;
                        .preorder-status {
                            display: inline-block;
                            height: px2rem(14);
                            line-height: px2rem(14);
                            padding: px2rem(1) px2rem(2);
                            border: px2rem(1) solid #FFA627;
                            margin-right: px2rem(5);
                        }
                    }
                    .shop-info {
                        height: px2rem(30);
                        line-height: px2rem(30);
                        color: #656565;
                        .appr-status {
                            float: left;
                            margin: - px2rem(3) px2rem(10) 0 0;
                            i {
                                font-size: px2rem(10);
                                color: #FFA627;
                            }
                        }
                        p {
                            float: left;
                            font-size: px2rem(12);
                        }
                        .distance {
                            font-size: px2rem(12);
                            float: right;
                        }
                    }
                    .shop-give {
                        font-size: px2rem(12);
                        height: px2rem(16);
                        text-align: left;
                        color: #656565;
                        margin-bottom: px2rem(12);
                        .shop-text {
                            float: left;
                        }
                        .allocation-icon {
                            float: right;
                            background-color: #FFD161;
                            height: px2rem(15);
                            line-height: px2rem(15);
                            padding: 0 px2rem(6);
                            font-size: px2rem(12);
                            color: #333;
                            border-radius: px2rem(7) 0 px2rem(7) 0;
                        }
                    }
                    .activity {
                        margin: px2rem(6) 0;
                        .new {
                            color: white;
                            font-size: px2rem(10);
                            padding: px2rem(1);
                        }
                        .tips {
                            display: inline-block;
                            width: 92%;
                            font-size: px2rem(12);
                            color: #888;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
}
</style>

